<template>
    <el-drawer :title="!dataForm.id ? '新建' : '编辑'" :visible.sync="visible" :wrapperClosable="false" size="600px"
        append-to-body class="JNPF-common-drawer">
        <div class="JNPF-flex-main">
            <div class="dynamicForm ">
                <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small" label-width="100px"
                    label-position="top">
                    <template v-if="!loading">
                        <!-- 具体表单 -->
                        <el-col :span="24">
                            <el-row :gutter="15">
                                <el-col :span="24">
                                    <jnpf-form-tip-item label="企业名称" prop="companyName">
                                        <JnpfInput v-model="dataForm.companyName"
                                            @change="changeData('companyName', -1)" placeholder="请输入" clearable
                                            :style='{ "width": "100%" }'>
                                        </JnpfInput>
                                    </jnpf-form-tip-item>
                                </el-col>
                                <el-col :span="24">
                                    <jnpf-form-tip-item label="统一社会信用代码" prop="enterpriseCreditCode">
                                        <JnpfInput v-model="dataForm.enterpriseCreditCode"
                                            @change="changeData('enterpriseCreditCode', -1)" placeholder="请输入" clearable
                                            :style='{ "width": "100%" }'>
                                        </JnpfInput>
                                    </jnpf-form-tip-item>
                                </el-col>
                                <el-col :span="24">
                                    <jnpf-form-tip-item label-width="0">
                                        <div class="JNPF-common-title">
                                            <h2>产品信息</h2>
                                        </div>
                                        <el-table :data="dataForm.fz_saas_productList" size='mini'>
                                            <el-table-column type="index" width="50" label="序号" align="center" />
                                            <el-table-column label="名称" prop="name">
                                                <template slot="header" v-if="false">
                                                    <span class="required-sign">*</span>名称
                                                </template>
                                                <template slot-scope="scope">
                                                    <JnpfInput v-model="scope.row.name"
                                                        @change="changeData('fz_saas_product-name', scope.$index)"
                                                        placeholder="请输入" clearable :style='{ "width": "100%" }'>
                                                    </JnpfInput>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="软件类型" prop="softtype">
                                                <template slot="header" v-if="false">
                                                    <span class="required-sign">*</span>软件类型
                                                </template>
                                                <template slot-scope="scope">
                                                    <JnpfSelect v-model="scope.row.softtype"
                                                        @change="changeData('fz_saas_product-softtype', scope.$index)"
                                                        placeholder="请选择" clearable :style='{ "width": "100%" }'
                                                        :options="fz_saas_productsofttypeOptions"
                                                        :props="fz_saas_productsofttypeProps">
                                                    </JnpfSelect>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="产品类别" prop="producttype">
                                                <template slot="header" v-if="false">
                                                    <span class="required-sign">*</span>产品类别
                                                </template>
                                                <template slot-scope="scope">
                                                    <JnpfCascader v-model="scope.row.producttype"
                                                        @change="changeData('fz_saas_product-producttype', scope.$index)"
                                                        placeholder="请选择" show-all-levels clearable
                                                        :style='{ "width": "100%" }' separator="/"
                                                        :options="fz_saas_productproducttypeOptions"
                                                        :props="fz_saas_productproducttypeProps">
                                                    </JnpfCascader>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="下载方式" prop="downloadmethod">
                                                <template slot="header" v-if="false">
                                                    <span class="required-sign">*</span>下载方式
                                                </template>
                                                <template slot-scope="scope">
                                                    <JnpfSelect v-model="scope.row.downloadmethod"
                                                        @change="changeData('fz_saas_product-downloadmethod', scope.$index)"
                                                        placeholder="请选择" clearable :style='{ "width": "100%" }'
                                                        :options="fz_saas_productdownloadmethodOptions"
                                                        :props="fz_saas_productdownloadmethodProps">
                                                    </JnpfSelect>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="联系电话" prop="phone">
                                                <template slot="header" v-if="false">
                                                    <span class="required-sign">*</span>联系电话
                                                </template>
                                                <template slot-scope="scope">
                                                    <JnpfInput v-model="scope.row.phone"
                                                        @change="changeData('fz_saas_product-phone', scope.$index)"
                                                        placeholder="请输入" clearable :style='{ "width": "100%" }'>
                                                    </JnpfInput>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="50">
                                                <template slot-scope="scope">
                                                    <el-button size="mini" type="text" class="JNPF-table-delBtn"
                                                        @click="delfz_saas_productList(scope.$index)">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <div class="table-actions" @click="addfz_saas_productList()">
                                            <el-button type="text" icon="el-icon-plus">添加</el-button>
                                        </div>
                                    </jnpf-form-tip-item>
                                </el-col>
                            </el-row>
                        </el-col>
                        <!-- 表单结束 -->
                    </template>
                </el-form>
                <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm" ref="selectDialog"
                    @select="addForSelect" @close="selectDialogVisible = false" />
            </div>
            <div class="drawer-footer">
                <div class="upAndDown-button" v-if="dataForm.id">
                    <el-button @click="prev" :disabled='prevDis'>
                        {{ '上一条' }}
                    </el-button>
                    <el-button @click="next" :disabled='nextDis'>
                        {{ '下一条' }}
                    </el-button>
                </div>
                <el-button type="primary" @click="dataFormSubmit(2)" :loading="continueBtnLoading">
                    {{ !dataForm.id ? '确定并新增' : '确定并继续' }}</el-button>
                <el-button @click="visible = false"> 取 消</el-button>
                <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
            </div>
        </div>
    </el-drawer>
</template>


<script>
import request from '@/utils/request'
import { mapGetters } from "vuex";
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { getDefaultCurrentValueUserId } from '@/api/permission/user'
import { getDefaultCurrentValueDepartmentId } from '@/api/permission/organize'
import { getDateDay, getLaterData, getBeforeData, getBeforeTime, getLaterTime } from '@/components/Generator/utils/index.js'
import { thousandsFormat } from "@/components/Generator/utils/index"
export default {
    components: {},
    props: [],
    data() {
        return {
            dataFormSubmitType: 0,
            continueBtnLoading: false,
            index: 0,
            prevDis: false,
            nextDis: false,
            allList: [],
            visible: false,
            loading: false,
            btnLoading: false,
            formRef: 'formRef',
            setting: {},
            eventType: '',
            userBoxVisible: false,
            selectDialogVisible: false,
            currTableConf: {},
            dataValueAll: {},
            addTableConf: {
                fz_saas_productList: { "popupType": "dialog", "hasPage": true, "popupTitle": "选择数据", "pageSize": 20, "columnOptions": [], "interfaceId": "", "interfaceName": "", "relationOptions": [], "templateJson": [], "popupWidth": "800px" },
            },
            //可选范围默认值
            ableAll: {
            },
            tableRows: {
                fz_saas_productList: {
                    name: '',
                    nameOptions: [],
                    softtypeOptions: [],
                    producttype: [],
                    producttypeOptions: [],
                    downloadmethodOptions: [],
                    phone: '',
                    phoneOptions: [],
                    enabledmark: undefined
                },
            },
            Vmodel: "",
            currVmodel: "",
            dataForm: {
                companyName: undefined,
                enterpriseCreditCode: undefined,
                fz_saas_productList: [],
            },
            tableRequiredData: {},
            dataRule:
            {
            },
            fz_saas_productsofttypeOptions: [{ "fullName": "大众免费使用", "id": "1" }, { "fullName": "购买使用", "id": "2" }],
            fz_saas_productsofttypeProps: { "label": "fullName", "value": "id" },
            fz_saas_productproducttypeOptions: [{ "children": [{ "fullName": "CAD", "id": "1-1" }, { "fullName": "CAE", "id": "1-2" }, { "fullName": "CAPP", "id": "1-3" }, { "fullName": "CAM", "id": "1-4" }, { "fullName": "数字孪生", "id": "1-5" }], "fullName": "研发制造", "id": "1" }, { "children": [{ "fullName": "PLM", "id": "2-1" }, { "fullName": "PDM", "id": "2-2" }, { "fullName": "DNC", "id": "2-3" }, { "fullName": "MDC", "id": "2-4" }, { "fullName": "QMC", "id": "2-5" }, { "fullName": "LIMS", "id": "2-6" }, { "fullName": "MES", "id": "2-7" }, { "fullName": "APS", "id": "2-8" }], "fullName": "生产制造", "id": "2" }, { "children": [{ "fullName": "ERP", "id": "3-1" }, { "fullName": "CRM", "id": "3-2" }, { "fullName": "SRM", "id": "3-3" }, { "fullName": "SCM", "id": "3-4" }, { "fullName": "OA", "id": "3-5" }, { "fullName": "BI", "id": "3-6" }, { "fullName": "FMIS", "id": "3-7" }, { "fullName": "BOM", "id": "3-8" }, { "fullName": "WMS", "id": "3-9" }, { "fullName": "MRP", "id": "3-10" }], "fullName": "经营管理", "id": "3" }, { "children": [{ "fullName": "监控系统", "id": "4-1" }, { "fullName": "日志管理系统", "id": "4-2" }, { "fullName": "故障管理系统", "id": "4-3" }, { "fullName": "安全管理系统", "id": "4-4" }], "fullName": "运维服务", "id": "4" }, { "fullName": "其他", "id": "5" }],
            fz_saas_productproducttypeProps: { "label": "fullName", "value": "id", "children": "children" },
            fz_saas_productdownloadmethodOptions: [{ "fullName": "超链接", "id": "Link" }, { "fullName": "安装包下载", "id": "Installer" }],
            fz_saas_productdownloadmethodProps: { "label": "fullName", "value": "id" },
            childIndex: -1,
            isEdit: false,
            interfaceRes: {
                companyName: [],
                enterpriseCreditCode: [],
                fz_saas_productname: [],
                fz_saas_productsofttype: [],
                fz_saas_productproducttype: [],
                fz_saas_productdownloadmethod: [],
                fz_saas_productphone: [],
            },
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    watch: {},
    created() {
        this.dataAll()
        this.initDefaultData()
        this.dataValueAll = JSON.parse(JSON.stringify(this.dataForm))
    },
    mounted() { },
    methods: {
        prev() {
            this.index--
            if (this.index === 0) {
                this.prevDis = true
            }
            this.nextDis = false
            for (let index = 0; index < this.allList.length; index++) {
                const element = this.allList[index];
                if (this.index == index) {
                    this.getInfo(element.id)
                }
            }
        },
        next() {
            this.index++
            if (this.index === this.allList.length - 1) {
                this.nextDis = true
            }
            this.prevDis = false
            for (let index = 0; index < this.allList.length; index++) {
                const element = this.allList[index];
                if (this.index == index) {
                    this.getInfo(element.id)
                }
            }
        },
        getInfo(id) {
            request({
                url: '/api/example/Fz_server_saas/' + id,
                method: 'get'
            }).then(res => {
                this.dataInfo(res.data)
            });
        },
        goBack() {
            this.visible = false
            this.$emit('refreshDataList', true)
        },
        changeData(model, index) {
            this.isEdit = false
            this.childIndex = index
            let modelAll = model.split("-");
            let faceMode = "";
            for (let i = 0; i < modelAll.length; i++) {
                faceMode += modelAll[i];
            }
            for (let key in this.interfaceRes) {
                if (key != faceMode) {
                    let faceReList = this.interfaceRes[key]
                    for (let i = 0; i < faceReList.length; i++) {
                        if (faceReList[i].relationField == model) {
                            let options = 'get' + key + 'Options';
                            if (this[options]) {
                                this[options]()
                            }
                            this.changeData(key, index)
                        }
                    }
                }
            }
        },
        changeDataFormData(type, data, model, index, defaultValue) {
            if (!this.isEdit) {
                if (type == 2) {
                    for (let i = 0; i < this.dataForm[data].length; i++) {
                        if (index == -1) {
                            this.dataForm[data][i][model] = defaultValue
                        } else if (index == i) {
                            this.dataForm[data][i][model] = defaultValue
                        }
                    }
                } else {
                    this.dataForm[data] = defaultValue
                }
            }
        },
        dataAll() {
        },
        fz_saas_productExist() {
            let isOk = true;
            for (let i = 0; i < this.dataForm.fz_saas_productList.length; i++) {
                const e = this.dataForm.fz_saas_productList[i];
            }
            return isOk;
        },
        clearData() {
            this.dataForm = JSON.parse(JSON.stringify(this.dataValueAll))
        },
        init(id, isDetail, allList) {
            this.prevDis = false
            this.nextDis = false
            this.allList = allList || []
            if (allList.length) {
                this.index = this.allList.findIndex(item => item.id === id)
                if (this.index == 0) {
                    this.prevDis = true
                }
                if (this.index == this.allList.length - 1) {
                    this.nextDis = true
                }
            } else {
                this.prevDis = true
                this.nextDis = true
            }
            this.dataForm.id = id || 0;
            this.visible = true;
            this.$nextTick(() => {
                if (this.dataForm.id) {
                    this.loading = true
                    request({
                        url: '/api/example/Fz_server_saas/' + this.dataForm.id,
                        method: 'get'
                    }).then(res => {
                        this.dataInfo(res.data)
                        this.loading = false
                    });
                } else {
                    this.clearData()
                    this.initDefaultData()
                }
            });
            this.$store.commit('generator/UPDATE_RELATION_DATA', {})
        },
        //初始化默认数据
        initDefaultData() {

        },
        // 表单提交
        dataFormSubmit(type) {
            this.dataFormSubmitType = type ? type : 0
            this.$refs['formRef'].validate((valid) => {
                if (valid) {
                    if (!this.fz_saas_productExist()) return
                    this.request()
                }
            })
        },
        request() {
            let _data = this.dataList()
            if (this.dataFormSubmitType == 2) {
                this.continueBtnLoading = true
            } else {
                this.btnLoading = true
            }
            if (!this.dataForm.id) {
                request({
                    url: '/api/example/Fz_server_saas',
                    method: 'post',
                    data: _data
                }).then((res) => {
                    this.$message({
                        message: res.msg,
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            if (this.dataFormSubmitType == 2) {
                                this.$nextTick(() => {
                                    this.clearData()
                                    this.initDefaultData()
                                })
                                this.continueBtnLoading = false
                                return
                            }
                            this.visible = false
                            this.btnLoading = false
                            this.$emit('refresh', true)
                        }
                    })
                }).catch(() => {
                    this.btnLoading = false
                    this.continueBtnLoading = false
                })
            } else {
                request({
                    url: '/api/example/Fz_server_saas/' + this.dataForm.id,
                    method: 'PUT',
                    data: _data
                }).then((res) => {
                    this.$message({
                        message: res.msg,
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            if (this.dataFormSubmitType == 2) return this.continueBtnLoading = false
                            this.visible = false
                            this.btnLoading = false
                            this.$emit('refresh', true)
                        }
                    })
                }).catch(() => {
                    this.btnLoading = false
                    this.continueBtnLoading = false
                })
            }
        },
        addfz_saas_productList() {
            let item = {
                name: undefined,
                softtype: '',
                producttype: [],
                downloadmethod: '',
                phone: undefined,
            }
            this.getfz_saas_productList(item)
        },
        delfz_saas_productList(index) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                this.dataForm.fz_saas_productList.splice(index, 1);
            }).catch(() => {
            });
        },
        getfz_saas_productList(value) {
            let item = { ...this.tableRows.fz_saas_productList, ...value }
            this.dataForm.fz_saas_productList.push(item)
            this.childIndex = this.dataForm.fz_saas_productList.length - 1
            this.isEdit = true
            this.isEdit = false
            this.childIndex = -1
        },
        openSelectDialog(key) {
            this.currTableConf = this.addTableConf[key]
            this.currVmodel = key
            this.selectDialogVisible = true
            this.$nextTick(() => {
                this.$refs.selectDialog.init()
            })
        },
        addForSelect(data) {
            for (let i = 0; i < data.length; i++) {
                let t = data[i]
                if (this['get' + this.currVmodel]) {
                    this['get' + this.currVmodel](t)
                }
            }
        },
        dateTime(timeRule, timeType, timeTarget, timeValueData, dataValue) {
            let timeDataValue = null;
            let timeValue = Number(timeValueData)
            if (timeRule) {
                if (timeType == 1) {
                    timeDataValue = timeValue
                } else if (timeType == 2) {
                    timeDataValue = dataValue
                } else if (timeType == 3) {
                    timeDataValue = new Date().getTime()
                } else if (timeType == 4) {
                    let previousDate = '';
                    if (timeTarget == 1 || timeTarget == 2) {
                        previousDate = getDateDay(timeTarget, timeType, timeValue)
                        timeDataValue = new Date(previousDate).getTime()
                    } else if (timeTarget == 3) {
                        previousDate = getBeforeData(timeValue)
                        timeDataValue = new Date(previousDate).getTime()
                    } else {
                        timeDataValue = getBeforeTime(timeTarget, timeValue).getTime()
                    }
                } else if (timeType == 5) {
                    let previousDate = '';
                    if (timeTarget == 1 || timeTarget == 2) {
                        previousDate = getDateDay(timeTarget, timeType, timeValue)
                        timeDataValue = new Date(previousDate).getTime()
                    } else if (timeTarget == 3) {
                        previousDate = getLaterData(timeValue)
                        timeDataValue = new Date(previousDate).getTime()
                    } else {
                        timeDataValue = getLaterTime(timeTarget, timeValue).getTime()
                    }
                }
            }
            return timeDataValue;
        },
        time(timeRule, timeType, timeTarget, timeValue, formatType, dataValue) {
            let format = formatType == 'HH:mm' ? 'HH:mm:00' : formatType
            let timeDataValue = null
            if (timeRule) {
                if (timeType == 1) {
                    timeDataValue = timeValue || '00:00:00'
                    if (timeDataValue.split(':').length == 3) {
                        timeDataValue = timeDataValue
                    } else {
                        timeDataValue = timeDataValue + ':00'
                    }
                } else if (timeType == 2) {
                    timeDataValue = dataValue
                } else if (timeType == 3) {
                    timeDataValue = this.jnpf.toDate(new Date(), format)
                } else if (timeType == 4) {
                    let previousDate = '';
                    previousDate = getBeforeTime(timeTarget, timeValue)
                    timeDataValue = this.jnpf.toDate(previousDate, format)
                } else if (timeType == 5) {
                    let previousDate = '';
                    previousDate = getLaterTime(timeTarget, timeValue)
                    timeDataValue = this.jnpf.toDate(previousDate, format)
                }
            }
            return timeDataValue;
        },
        dataList() {
            var _data = this.dataForm;
            return _data;
        },
        dataInfo(dataAll) {
            let _dataAll = dataAll
            this.dataForm = _dataAll
            this.isEdit = true
            this.dataAll()
            for (let i = 0; i < _dataAll.fz_saas_productList.length; i++) {
                this.childIndex = i
            }
            this.childIndex = -1
        },
    },
}

</script>
